﻿<template>
  <div class="carrier-management">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">承运商管理</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" :icon="Refresh" @click="handleRefresh">刷新</el-button>
        <el-button :icon="Back" @click="handleBack">返回</el-button>
      </div>
    </div>

    <!-- 数据筛选区域 -->
    <div class="filter-section">
      <h3 class="section-title">数据筛选</h3>
      <div class="filter-form">
        <div class="filter-item">
          <label>承运商编号:</label>
          <el-input
            v-model="filterForm.carrierNumber"
            placeholder="请输入"
            clearable
            style="width: 200px"
          />
        </div>
        <div class="filter-item">
          <label>承运商名称:</label>
          <el-input
            v-model="filterForm.carrierName"
            placeholder="请输入"
            clearable
            style="width: 200px"
          />
        </div>
        <div class="filter-actions">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 数据列表区域 -->
    <div class="list-section">
      <h3 class="section-title">数据列表</h3>
      
      <!-- 操作按钮区域 -->
      <div class="list-actions">
        <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
        <el-button type="warning" :icon="Edit" @click="handleEdit" :disabled="selectedRows.length !== 1">编辑</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete" :disabled="selectedRows.length === 0">删除</el-button>
        <el-button :icon="Refresh" @click="handleRefresh">刷新</el-button>
        <el-button :icon="Download" @click="handleExport">导出</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-class-name="getRowClassName"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="carrierNumber" label="承运商编号" width="150" />
        <el-table-column prop="carrierName" label="承运商名称" width="200" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              v-if="scope.row.isHighlighted"
              type="primary"
              size="small"
              :icon="Edit"
              @click="handleEditRow(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.isHighlighted"
              type="danger"
              size="small"
              :icon="Delete"
              @click="handleDeleteRow(scope.row)"
            >
              删除
            </el-button>
            <template v-else>
              <el-link type="primary" @click="handleEditRow(scope.row)">编辑</el-link>
              <el-divider direction="vertical" />
              <el-link type="danger" @click="handleDeleteRow(scope.row)">删除</el-link>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="dialogRules"
        label-width="100px"
      >
        <el-form-item label="承运商编号:" prop="carrierNumber">
          <el-input
            v-model="dialogForm.carrierNumber"
            placeholder="可不填写,自动生成"
            clearable
          />
        </el-form-item>
        <el-form-item label="承运商名称:" prop="carrierName">
          <el-input
            v-model="dialogForm.carrierName"
            placeholder="全部"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注:" prop="remarks">
          <el-input
            v-model="dialogForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogCancel">取消</el-button>
          <el-button type="primary" @click="handleDialogConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Back, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

// 定义承运商数据类型
interface CarrierData {
  id: number
  carrierNumber: string
  carrierName: string
  remarks: string
  isHighlighted: boolean
}

// 筛选表单
const filterForm = reactive({
  carrierNumber: '',
  carrierName: ''
})

// 表格数据
const tableData = ref<CarrierData[]>([
  {
    id: 1,
    carrierNumber: '00049',
    carrierName: '顺丰快递',
    remarks: '顺丰快递',
    isHighlighted: true
  },
  {
    id: 2,
    carrierNumber: '00048',
    carrierName: '申通快递',
    remarks: '申通快递',
    isHighlighted: true
  },
  {
    id: 3,
    carrierNumber: '00047',
    carrierName: '中通快递',
    remarks: '中通快递',
    isHighlighted: false
  },
  {
    id: 4,
    carrierNumber: '00046',
    carrierName: '圆通快递',
    remarks: '圆通快递',
    isHighlighted: false
  },
  {
    id: 5,
    carrierNumber: '00045',
    carrierName: '韵达快递',
    remarks: '韵达快递',
    isHighlighted: false
  }
])

// 选择相关
const selectAll = ref(false)
const selectedRows = ref<CarrierData[]>([])

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('新增承运商')
const dialogFormRef = ref<FormInstance>()
const dialogForm = reactive({
  carrierNumber: '',
  carrierName: '',
  remarks: ''
})

// 表单验证规则
const dialogRules: FormRules = {
  carrierName: [
    { required: true, message: '请输入承运商名称', trigger: 'blur' }
  ]
}

// 行样式
const getRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  if (rowIndex < 2) {
    return 'highlight-row'
  }
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
}

// 事件处理
const handleRefresh = () => {
  ElMessage.success('刷新成功')
}

const handleBack = () => {
  window.history.back()
}

const handleQuery = () => {
  ElMessage.success('查询成功')
}

const handleReset = () => {
  filterForm.carrierNumber = ''
  filterForm.carrierName = ''
  ElMessage.success('重置成功')
}

const handleAdd = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增承运商'
  dialogForm.carrierNumber = ''
  dialogForm.carrierName = ''
  dialogForm.remarks = ''
}

const handleEdit = () => {
  if (selectedRows.value.length === 1) {
    const row = selectedRows.value[0]
    dialogVisible.value = true
    dialogTitle.value = '编辑承运商'
    dialogForm.carrierNumber = row.carrierNumber
    dialogForm.carrierName = row.carrierName
    dialogForm.remarks = row.remarks
  }
}

const handleDelete = () => {
  if (selectedRows.value.length > 0) {
    ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 条记录吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      ElMessage.success('删除成功')
    }).catch(() => {
      ElMessage.info('已取消删除')
    })
  }
}

const handleExport = () => {
  ElMessage.success('导出成功')
}

const handleSelectAll = (val: boolean) => {
  if (val) {
    selectedRows.value = [...tableData.value]
  } else {
    selectedRows.value = []
  }
  selectAll.value = val
}

const handleSelectionChange = (selection: CarrierData[]) => {
  selectedRows.value = selection
  selectAll.value = selection.length === tableData.value.length
}

const handleEditRow = (row: CarrierData) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑承运商'
  dialogForm.carrierNumber = row.carrierNumber
  dialogForm.carrierName = row.carrierName
  dialogForm.remarks = row.remarks
}

const handleDeleteRow = (row: CarrierData) => {
  ElMessageBox.confirm(
    `确定要删除承运商 "${row.carrierName}" 吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const handleDialogCancel = () => {
  dialogVisible.value = false
  dialogFormRef.value?.resetFields()
}

const handleDialogConfirm = async () => {
  if (!dialogFormRef.value) return
  
  try {
    await dialogFormRef.value.validate()
    
    if (dialogTitle.value === '新增承运商') {
      // 新增逻辑
      const newId = Math.max(...tableData.value.map(item => item.id)) + 1
      const newCarrier: CarrierData = {
        id: newId,
        carrierNumber: dialogForm.carrierNumber || `000${newId}`,
        carrierName: dialogForm.carrierName,
        remarks: dialogForm.remarks,
        isHighlighted: false
      }
      tableData.value.push(newCarrier)
      ElMessage.success('新增成功')
    } else {
      // 编辑逻辑
      ElMessage.success('编辑成功')
    }
    
    dialogVisible.value = false
    dialogFormRef.value.resetFields()
  } catch (error) {
    console.log('表单验证失败')
  }
}

onMounted(() => {
  // 组件挂载后的初始化逻辑
})
</script>

<style scoped>
.carrier-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.header-right {
  display: flex;
  gap: 10px;
}

/* 筛选区域 */
.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.filter-form {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* 列表区域 */
.list-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.list-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* 表格样式 */
:deep(.highlight-row) {
  background-color: #fff3cd !important;
}

:deep(.even-row) {
  background-color: #f8f9fa;
}

:deep(.odd-row) {
  background-color: white;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  border-bottom: 1px solid #ebeef5;
}

/* 对话框样式 */
.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-form {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-actions {
    margin-left: 0;
    width: 100%;
  }
  
  .list-actions {
    flex-wrap: wrap;
  }
}
</style>
